<template>
<div class="sign-mod-EchartItem1">
    图表组件-1
</div>
</template>

<script>
//import echarts from 'echarts'

export default {
    name: 'EchartItem1',
    // 初始化函数
    mounted () {
        //初始化图表
        //this.getData();
        this.costBudgetCompriseDistribution();
    },
    props: {
        // 列表数据
        tempData: {
            type: Object,
            default : function () {
                return {
                    queryUrl: '',
                    saveUrl: ''
                };
            }
        },
        // 模板id
        templateId: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 内容id
        briefingDetailId: {
            type: String,
            default : function () {
                return '';
            }
        }
    },
    data () {
        return {
            echartObjEdit: null,
            echartObjPrev: null,
            subjectDistributionStructureList: {
                columns: ['costType', '预算(亿元)', '实际(亿元)', '执行率'],
                rows: []
            },
            subjectDistributionList: {
                columns: ['subject2', '预算(亿元)', '实际(亿元)', '执行率'],
                rows: []
            },
            dataColumns: {
                columns: ['type', '数量'],
                rows: [{
                    'type': '电脑1',
                    '数量': '1231'
                },{
                    'type': '电脑2',
                    '数量': '444'
                },{
                    'type': '电脑2',
                    '数量': '66'
                }]
            },
            extend: {
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '20px',
                        right: '20px',
                        top: '15%',
                        bottom: '10%',
                        containLabel: true
                    },
                    color: ['#1f40e6', '#00a9f4', '#e3556d', '#f58b68', '#22d3dd', '#4cb7db'],
                    series: {
                        barWidth: 10,
                        barGap: 0,
                        symbol: 'emptyCircle',
                        symbolSize: 1,
                        smooth: false,
                        cursor: 'default',
                        lineStyle: {
                            width: 2
                        }
                    },
                    tooltip: {
                        show: true
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: ['#f2f2f2']
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#999'
                            }
                        }
                    }
                }
        }
    },
    methods: {
        // 供子级调用(点击子级的按钮更新数据)-更新子数据
        updateSignTempData(tempData) {
            this.$emit('updateSignTempData', tempData);
            console.log('updateSignTempData:');
            console.log(tempData);
        },
        // 供父级调用(点击父级的保存按钮 tempData.isSaveInChild 为true时调用)-调用子级的保存函数
        saveSignTempForChild() {
            this.echartObjEdit && this.echartObjEdit.resize();
            console.log('saveSignTempForChild:');
            console.log(this.tempData);
        },
        renderWatch() {
                let target = this.$refs.pieOpinionChart;
                this.myChart = this.$echarts.init(target, 'cio-theme');

                this.myChart.resize({
                    width: target.offsetWidth,
                    height: target.offsetHeight
                });
                this.options.series[0].data = this.dataList;
                this.myChart.setOption(this.options);
            },
        // 初始化数据
        async getData() {
            return;
            this.loadedText = '数据加载中...';
            this.initEchartObj();
            let res = await C.request.post(C.Api('queryEchartList01'), {
                aa: 11
            });
            if (res.flag === C.Flag.SUCCESS) {
                this.initEchart(res.data.xList, res.data.yList, this.echartObjEdit);
                this.initEchart(res.data.xList, res.data.yList, this.echartObjPrev);
            } else {
                this.loadedText = '请求失败，请重试';
            }
        },

        // 成本结构-类型
        async costBudgetCompriseDistribution() {
            this.$store.commit('setIsSwitchDate', false);
            // 同步获取数据
            this.subjectDistributionStructureList.rows = [];
            let res = await C.request.get(C.Api('costBudgetCompriseDistribution'), {
                targetMonth: this.queryTime,
                company: this.company
            }, 1);
            if (res.flag === C.Flag.SUCCESS) {
                res.data.forEach(item=> {
                    this.subjectDistributionStructureList.rows.push({
                        costType: item.costType,
                        '预算(亿元)': item.budgetAmount,
                        '实际(亿元)': item.actualAmount,
                        '执行率': item.ratio
                    });
                });
            }
            setTimeout(()=> {
                this.$store.commit('setIsSwitchDate', true);
            }, 2000);
        },

        // 初始化图表对象
        initEchartObj () {
            let className1 = '.visual-mod-edit-temp .echart-sign-mod.' + this.tempData.dataKey;
            let className2 = '.visual-mod-prev .echart-sign-mod.' + this.tempData.dataKey;

            if(!this.echartObjEdit && document.querySelector(className1)) {
                this.echartObjEdit = echarts.init(document.querySelector(className1));
            }
            if(!this.echartObjPrev && document.querySelector(className2)) {
                this.echartObjPrev = echarts.init(document.querySelector(className2));
            }
        },
        // 初始化图表
        initEchart (xList, yList, echartObj) {
            if(!echartObj) {
                return;
            }

            let option = {
                color: ['#E94709'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xList,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '类目',
                        type: 'bar',
                        barWidth: '15px',
                        data: yList
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表
            echartObj.setOption(option);
            echartObj.resize();
        }
    },
    watch: {
        tempData () {
            //this.getData();
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sign-mod-EchartItem1, .echart-sign-mod{ height: 100%; }
</style>
